import defaultSettings from "@/settings";
import {ThemeEnum} from "@/enums/ThemeEnum";
import Color from "color";

type SettingsValue = boolean | string;

export const useSettingsStore = defineStore("setting", () => {
    // 是否显示设置
    const settingsVisible = ref(false);
    // 是否显示标签视图
    const tagsView = useStorage<boolean>("tagsView", defaultSettings.tagsView);
    // 是否显示侧边栏logo
    const sidebarLogo = useStorage<boolean>(
        "sidebarLogo",
        defaultSettings.sidebarLogo
    );
    // 是否固定头部
    const fixedHeader = useStorage<boolean>(
        "fixedHeader",
        defaultSettings.fixedHeader
    );
    // 布局模式：left-左侧模式(默认) top-顶部模式 mix-混合模式
    const layout = useStorage<string>("layout", defaultSettings.layout);
    // 主题颜色
    const themeColor = useStorage<string>(
        "themeColor",
        defaultSettings.themeColor
    );
    // 主题：light-亮色(默认) dark-暗色
    const theme = useStorage<string>("theme", defaultSettings.theme);
    // 是否开启水印
    const watermarkEnabled = useStorage<boolean>(
        "watermarkEnabled",
        defaultSettings.watermarkEnabled
    );

    watch(
        [theme, themeColor],
        ([newTheme, newThemeColor], [oldTheme, oldThemeColor]) => {
            if (newTheme !== oldTheme) {
                if (newTheme === ThemeEnum.DARK) {
                    document.documentElement.classList.add("dark");
                } else {
                    document.documentElement.classList.remove("dark");
                }
            }

            if (newThemeColor !== oldThemeColor) {
                const rootStyle = document.documentElement.style;
                rootStyle.setProperty(`--el-color-primary`, newThemeColor);
                rootStyle.setProperty(`--el-color-primary-dark-2`, newThemeColor);

                for (let i = 1; i < 10; i++) {
                    rootStyle.setProperty(
                        `--el-color-primary-light-${i}`,
                        `${Color(newThemeColor).alpha(1 - i * 0.1)}`
                    );
                }
            }
        },
        {
            immediate: true, // 立即执行，确保在侦听器创建时执行一次
        }
    );

    const settingsMap: Record<string, Ref<SettingsValue>> = {
        fixedHeader,
        tagsView,
        sidebarLogo,
        layout,
        watermarkEnabled,
    };

    function changeSetting({
                               key,
                               value,
                           }: {
        key: string;
        value: SettingsValue;
    }) {
        const setting = settingsMap[key];
        if (setting) {
            setting.value = value;
        }
    }

    /**
     * 切换主题
     */
    function changeTheme(val: string) {
        theme.value = val;
    }

    /**
     * 切换主题颜色
     *
     * @param color 主题颜色
     *
     */
    function changeThemeColor(color: string) {
        themeColor.value = color;
    }

    /**
     * 切换布局
     */
    function changeLayout(val: string) {
        layout.value = val;
    }

    return {
        settingsVisible,
        tagsView,
        fixedHeader,
        sidebarLogo,
        layout,
        themeColor,
        theme,
        watermarkEnabled,
        changeSetting,
        changeTheme,
        changeThemeColor,
        changeLayout,
    };
});
